<template>
  <div class="collect">
    <div class="item">
      <div class="title">李哈哈油站交接班日报详情</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%">
          <el-table-column prop="q1" label="序号" align="left" width="150px">
          </el-table-column>
          <el-table-column prop="q2" label="日期" align="left" width="150px">
          </el-table-column>
          <el-table-column prop="q3" label="枪号" align="left" width="150px">
          </el-table-column>
          <el-table-column prop="q4" label="油品号" align="left" width="150px">
          </el-table-column>
          <el-table-column prop="q5" label="单价" align="left" width="150px">
          </el-table-column>
          <el-table-column
            prop="q4"
            label="起始泵码"
            align="left"
            width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="q5"
            label="结束泵码"
            align="left"
            width="150px"
          >
          </el-table-column>
          <el-table-column prop="q4" label="走字数" align="left" width="150px">
          </el-table-column>
          <el-table-column
            prop="q5"
            label="回灌升数"
            align="left"
            width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="q4"
            label="回罐金额"
            align="left"
            width="150px"
          >
          </el-table-column>
          <el-table-column prop="q5" label="枪号" align="left" width="150px">
          </el-table-column>
          <el-table-column prop="q5" label="油罐号" align="left" width="150px">
          </el-table-column>
          <el-table-column
            prop="q5"
            label="回罐原因"
            align="left"
            width="150px"
          >
          </el-table-column>
          <el-table-column label="实际售出" align="left">
            <el-table-column prop="q5" label="升数" align="left" width="150px">
            </el-table-column>
            <el-table-column prop="q5" label="金额" align="left" width="150px">
            </el-table-column>
            <el-table-column
              prop="q5"
              label="优惠金额"
              align="left"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              prop="q5"
              label="支付金额"
              align="left"
              width="150px"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="微信支付" align="left">
            <el-table-column prop="q5" label="升数" align="left" width="150px">
            </el-table-column>
            <el-table-column prop="q5" label="金额" align="left" width="150px">
            </el-table-column>
            <el-table-column
              prop="q5"
              label="优惠金额"
              align="left"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              prop="q5"
              label="支付金额"
              align="left"
              width="150px"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="支付宝支付" align="left">
            <el-table-column prop="q5" label="升数" align="left" width="150px">
            </el-table-column>
            <el-table-column prop="q5" label="金额" align="left" width="150px">
            </el-table-column>
            <el-table-column
              prop="q5"
              label="优惠金额"
              align="left"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              prop="q5"
              label="支付金额"
              align="left"
              width="150px"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="ETC支付" align="left">
            <el-table-column prop="q5" label="升数" align="left" width="150px">
            </el-table-column>
            <el-table-column prop="q5" label="金额" align="left" width="150px">
            </el-table-column>
            <el-table-column
              prop="q5"
              label="优惠金额"
              align="left"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              prop="q5"
              label="支付金额"
              align="left"
              width="150px"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="last">
      <div>加油员：________</div>
      <div>计量员：________</div>
      <div>站长：________</div>
      <div>维修员：________</div>
      <div>ME：________</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table1: [
        {
          title1: "油机出油合计应收：",
          amount1: "hah",
          title2: "短款：",
          amount2: "3333",
        },
        {
          title1: "加油实收合计金额：",
          amount1: "hah",
          title2: "优惠券合计金额：",
          amount2: "3333",
        },
        {
          title1: "充值实收合计金额：",
          amount1: "hah",
          title2: "立减合计金额：",
          amount2: "3333",
        },
        {
          title1: "客户退款合计金额：",
          amount1: "hah",
          title2: "回罐合计金额：",
          amount2: "3333",
        },
        {
          title1: "",
          amount1: "",
          title2: "优惠合计金额：",
          amount2: "3333",
        },
      ],
      table2: [
        {
          q1: "11",
          q2: "12",
          q3: "13",
          q4: "14",
          q5: "15",
        },
      ],
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    addclass(row) {
      console.log(row);
      if (row.columnIndex % 2 === 0) return "cellcss";
    },
  },
};
</script>
<style lang="scss">
::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;
  .el-button {
    margin: 0 5px 0 0;
  }
}
// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;
  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }
  .el-button--cyan {
    margin-left: 20px;
  }
}
::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}
::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}
.collect {
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  .item {
    margin-top: 10px;
    .title {
      text-align: center;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: bold;
    }
    .describe {
      font-size: 12px;
      text-align: center;
    }
  }
  .cellcss {
    background-color: #f6f6f6;
  }
  .last {
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
}
</style>
